<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音悦评论</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/comment.css">
    <!--    <link rel="stylesheet" href="/dev/views/slx/layui/css/layui.css">-->
    <style>
        .red {
            color: red;
        }
    </style>
</head>
<body>
<!--
    此评论textarea文本框部分使用的https://github.com/alexdunphy/flexText此插件
-->
<div class="commentAll">
    <!--评论区域 begin-->
    <div class="reviewArea clearfix">
        <input class="content comment-input" placeholder="请开始你的评论&hellip;" onkeyup="keyUP(this)"></input>
        <a href="javascript:" class="plBtn">评论</a>
    </div>
    <!--评论区域 end-->
    <!--回复区域 begin-->
    <div class="comment-show">

    </div>
    <!--回复区域 end-->
</div>
<div id="demo-laypage-all" style=" margin: auto;"></div>


<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
    var name = localStorage.getItem("username");
    var phone = localStorage.getItem("phone");
    var uphoto = localStorage.getItem("uphoto");
    var uid = localStorage.getItem("uid");
    var commenid=0;
</script>
<script>
    $(function () {
        $.ajax({
            type: "get",
            url: `/dev/ping/se`,
            success: function (result) {
                var se = result.data;
                loadData1(se)
            }
        })
    })
    function loadData1(se) {
        let s = "";

        for (var i = se.length - 1; i >= 0; i--) {
            (function (index) {
                s += `
        <div class="comment-show-con clearfix">
          <div class="comment-show-con-img pull-left"><img src='${se[index].uphoto}' alt=""></div>
          <div class="comment-show-con-list pull-left clearfix">
            <div class="pl-text clearfix">
              <a href="#" class="comment-size-name">${se[index].fromName} : </a>
              <span class="my-pl-con">&nbsp;${se[index].content}</span>
            </div>
            <div class="date-dz">
              <span class="date-dz-left pull-left comment-time">${se[index].createTime}</span>
              <div class="date-dz-right pull-right comment-pl-block">
                <a href="javascript:;" class="removeBlock" value="${se[index].id}+${se[index].fromName}+1">删除</a>
                <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left" value="${se[index].id}">回复</a>
                <span class="pull-left date-dz-line">|</span>
                <a href="javascript:;" class="date-dz-z pull-left" value="${se[index].id}+1"><i class="date-dz-z-click-red" ></i>赞 (<i class="z-num">${se[index].number}</i>)</a>
              </div>
            </div>
            <div class="hf-list-con" id="hf-list-con-${se[index].id}"></div>
          </div>
        </div>
      `;
                // 获取二级评论数据
                getHuiFuData(se[index].id, function (hfData) {
                    // 拼接二级评论到一级评论中
                    $("#hf-list-con-" + se[index].id).html(hfData);
                        console.log()
                        // 所有二级评论数据已获取完毕，将s赋值给.comment-show元素


                });
            })(i);
            $(".comment-show").html(s);
        }
    }
    function getHuiFuData(id, callback) {
        $.ajax({
            type: "get",
            url: `/dev/hui/ss/${id}`,
            success: function (result) {
                var huiFuData = result.data;
                var hfHtml = "";
                for (var j = 0; j < huiFuData.length; j++) {
                    hfHtml += `
                    <div class="all-pl-con"><div class="pl-text hfpl-text clearfix"><a href="#" class="comment-size-name">${huiFuData[j].fromName} : </a><span class="my-pl-con">回复<a href="#" class="atName">@${huiFuData[j].replyName}</a> : ${huiFuData[j].content}</span></div><div class="date-dz"> <span class="date-dz-left pull-left comment-time">${huiFuData[j].createTime}</span> <div class="date-dz-right pull-right comment-pl-block"> <a href="javascript:;" class="removeBlock" value="${huiFuData[j].id}+${huiFuData[j].fromName}+2">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left" value="${huiFuData[j].id}">回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left" value="${huiFuData[j].id}+2" ><i class="date-dz-z-click-red" ></i>赞 (<i class="z-num">${huiFuData[j].number}</i>)</a> </div> </div></div>
                `;
                }
                callback(hfHtml);
            }
        });
    }

</script>


<!--textarea限制字数-->
<script type="text/javascript">
    function keyUP(t) {
        var len = $(t).val().length;
        if (len > 139) {
            $(t).val($(t).val().substring(0, 140));
        }
    }
</script>
<!--点击评论创建评论条-->
<script type="text/javascript">

    $('.commentAll').on('click', '.plBtn', function () {
        if (null == localStorage.getItem("phone")) {
            alert("请先登录！！！")

        } else {

            var myDate = new Date();
            //获取当前年
            var year = myDate.getFullYear();
            //获取当前月
            var month = myDate.getMonth() + 1;
            //获取当前日
            var date = myDate.getDate();
            var h = myDate.getHours();       //获取当前小时数(0-23)
            var m = myDate.getMinutes();     //获取当前分钟数(0-59)
            if (m < 10) m = '0' + m;
            var s = myDate.getSeconds();
            if (s < 10) s = '0' + s;
            var now = year + '-' + month + "-" + date + " " + h + ':' + m + ":" + s;
            //获取输入内容
            // var oSize = $(this).siblings('.flex-text-wrap').find('.comment-input').val();
            var oSize = $('.comment-input').val();

            oHtml = '<div class="comment-show-con clearfix"><div class="comment-show-con-img pull-left"><img src=' + uphoto + ' alt=""></div> <div class="comment-show-con-list pull-left clearfix"><div class="pl-text clearfix"> <a href="#" class="comment-size-name">' + name + ' : </a> <span class="my-pl-con">&nbsp;' + oSize + '</span> </div> <div class="date-dz"> <span class="date-dz-left pull-left comment-time">' + now + '</span> <div class="date-dz-right pull-right comment-pl-block"><a href="javascript:;" class="removeBlock">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a> </div> </div><div class="hf-list-con"></div></div> </div>';

            console.log(oSize);
            if (oSize.replace(/(^\s*)|(\s*$)/g, "") != '') {
                $(this).parents('.reviewArea ').siblings('.comment-show').prepend(oHtml);
                $(this).siblings('.flex-text-wrap').find('.comment-input').prop('value', '').siblings('pre').find('span').text('');

            }
            var sid=document.getElementsByClassName("date-dz-pl").value;
            console.log(sid)
            // $.ajax({
            //     type: "post",
            //     url: `/dev/ping/inse/${phone}/${now}/${oSize}`,
            //     success: function (result) {
            //
            //
            //     }
            // })

        }

    });
</script>
<!--点击回复动态创建回复块-->
<script type="text/javascript">
    $('.comment-show').on('click', '.pl-hf', function () {
        //获取回复人的名字
        var oid=$(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con');;
        commenid=oid.context.attributes.value.value;
        var fhName = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
        //回复@
        var fhN = '回复@' + fhName;
        //var oInput = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.hf-con');
        var fhHtml = '<div class="hf-con pull-left"> <input class="content comment-input hf-input" placeholder="" onkeyup="keyUP(this)"></input> <a href="javascript:;" class="hf-pl">评论</a></div>';
        //显示回复
        if ($(this).is('.hf-con-block')) {
            $(this).parents('.date-dz-right').parents('.date-dz').append(fhHtml);
            $(this).removeClass('hf-con-block');

            // $('.content').flexText();

            $(this).parents('.date-dz-right').siblings('.hf-con').find('.pre').css('padding', '6px 15px');
            //console.log($(this).parents('.date-dz-right').siblings('.hf-con').find('.pre'))
            //input框自动聚焦
            $(this).parents('.date-dz-right').siblings('.hf-con').find('.hf-input').val('').focus().val(fhN);
        } else {
            $(this).addClass('hf-con-block');
            $(this).parents('.date-dz-right').siblings('.hf-con').remove();
        }
    });
</script>

<!--评论回复块创建-->
<script type="text/javascript">
    var oHfName;
    $('.comment-show').on('click', '.hf-pl', function () {

        var oThis = $(this);
        localStorage.setItem("oThis",oThis)

        var myDate = new Date();
        //获取当前年
        var year = myDate.getFullYear();
        //获取当前月
        var month = myDate.getMonth() + 1;
        //获取当前日
        var date = myDate.getDate();
        var h = myDate.getHours();       //获取当前小时数(0-23)
        var m = myDate.getMinutes();     //获取当前分钟数(0-59)
        if (m < 10) m = '0' + m;
        var s = myDate.getSeconds();
        if (s < 10) s = '0' + s;
        var now = year + '-' + month + "-" + date + " " + h + ':' + m + ":" + s;
        //获取输入内容
        // var oHfVal = $(this).siblings('.flex-text-wrap').find('.hf-input').val();
        var oHfVal = $('.hf-input').val();
        var oH=oHfVal.split("@")[1]
        var ohna=oH.split(":")
        var ohname=ohna[0]
        var ohcomment=ohna[1].replace(/\s/g, "")
        console.log(ohcomment)
        oHfName = $(this).parents('.hf-con').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html().split(":")[0].replace(/\s/g, "");

        var oAllVal = '回复@' + oHfName;
        console.log(oHfName)
        if (oHfVal.replace(/^ +| +$/g, '') == '' || oHfVal == oAllVal) {

        } else {
            // $.getJSON("../js/pl.json",function(data){
            //     var oAt = '';
            //     var oHf = '';
            //     $.each(data,function(n,v) {
            //         delete v.hfContent;
            //         delete v.atName;
            //         var arr;
            //         var ohfNameArr;
            //         if (oHfVal.indexOf("@") == -1) {
            //             data['atName'] = '';
            //             data['hfContent'] = oHfVal;
            //         } else {
            //             arr = oHfVal.split(':');
            //             ohfNameArr = arr[0].split('@');
            //             data['hfContent'] = arr[1];
            //             data['atName'] = ohfNameArr[1];
            //         }
            //         if(data.atName == ''){
            //             oAt = data.hfContent;
            //         }else {
            //             oAt = '回复<a href="#" class="atName">@'+data.atName+'</a> : '+data.hfContent;
            //         }
            //         oHf = data.hfName;
            //     });


            var oAt = '';
            var oHf = '';
            var arr;
            var ohfNameArr;

            if (oHfVal.indexOf("@") == -1) {
                replyName = '';
                content = oHfVal;
            } else {
                arr = oHfVal.split(':');
                ohfNameArr = arr[0].split('@');
                content = arr[1];
                replyName = ohfNameArr[1];
            }

            if (oHfName == '') {
                oAt = content;
            } else {
                oAt = '回复<a href="#" class="atName">@' + oHfName + '</a> : ' + content;
            }
            oHf = oHfName;

            var now = new Date().toLocaleString();
            var oHtml = '<div class="all-pl-con"><div class="pl-text hfpl-text clearfix"><a href="#" class="comment-size-name">' + name + ' : </a><span class="my-pl-con">' + oAt + '</span></div><div class="date-dz"> <span class="date-dz-left pull-left comment-time">' + now + '</span> <div class="date-dz-right pull-right comment-pl-block"> <a href="javascript:;" class="removeBlock">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a> </div> </div></div>';
            $('.hf-pl').parents('.hf-con').parents('.comment-show-con-list').find('.hf-list-con').css('display', 'block').html(oHtml) && oThis.parents('.hf-con').siblings('.date-dz-right').find('.pl-hf').addClass('hf-con-block') && oThis.parents('.hf-con').remove();


            $.get(

                 `/dev/hui/inst/${ohcomment}/${oHfName}/${name}/${commenid}/${uid}`,
                 function (result) {


                 });
        }
    });
</script>
<!--删除评论块-->
<script type="text/javascript">
    $('.commentAll').on('click', '.removeBlock', function () {
        var name = localStorage.getItem("username")

        var oT = $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con');
        console.log(oT)
        var str = oT.context.attributes.value.value;
        var resul = str.split("+");
        var id = resul[0]
        var fname = resul[1]
        var tai=resul[2]
        if (name != fname) {
            alert("这个好像不是咱的评论！！！")
        } else {

            if (oT.siblings('.all-pl-con').length >= 1) {
                oT.remove();
            } else {
                $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con').parents('.hf-list-con').css('display', 'none')
                oT.remove();
            }
            $(this).parents('.date-dz-right').parents('.date-dz').parents('.comment-show-con-list').parents('.comment-show-con').remove();
            if (tai==1)
            {
                $.post(`/dev/ping/del/${id}`, function (result) {

                })
            }
            else if(tai==2)
            {
                $.post(`/dev/hui/del/${id}`, function (result) {

                })
            }

        }


    })
</script>
<!--点赞-->
<script type="text/javascript">
    $('.comment-show').on('click', '.date-dz-z', function () {
        var si=$(this).context.attributes.value.value
        var st=si.split("+")
        var uid=st[0];
        var pid=st[1];

        console.log(uid)
        var zNum = $(this).find('.z-num').html();

        if ($(this).is('.date-dz-z-click')) {
            zNum--;
            $(this).removeClass('date-dz-z-click red');
            $(this).find('.z-num').html(zNum);
            $(this).find('.date-dz-z-click-red').removeClass('red');
            if (pid==1)
            {
                $.post(`/dev/ping/up/${zNum}/${uid}`,function (result)
                {

                })
            }else if (pid=2)
            {
                $.post(`/dev/hui/up/${zNum}/${uid}`,function (result)
                {

                })
            }

        } else {
            zNum++;
            $(this).addClass('date-dz-z-click');
            $(this).find('.z-num').html(zNum);
            $(this).find('.date-dz-z-click-red').addClass('red');
            if (pid==1)
            {
                $.post(`/dev/ping/up/${zNum}/${uid}`,function (result)
                {

                })
            }else if (pid=2)
            {
                $.post(`/dev/hui/up/${zNum}/${uid}`,function (result)
                {

                })
            }
        }
    })
</script>
<script>

</script>
</body>
</html>